<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: 1074699502@qq.com
 * @Contact: QQ:1074699502
 * @LastEditors: 梧桐
 * @LastEditTime: 2020-12-06 23:34:41
-->
<template>
<div class="windowCard" @click="linkTo">
    <div class="windowHeader">
        <h1 class="title">{{cardInfo.title}}</h1>
        <div v-if="type=='rush'">
            <slot name="cutdown"></slot>
        </div>

        <div v-else-if="type=='live'" class="liveBroad">
            <liveAnimation :isShowBg="false" />直播
        </div>
        <div class="badge" v-else :style="{background:cardInfo.tag_bg_color}">
            {{cardInfo.tag}}
        </div>
    </div>
    <p v-show="cardInfo.slogan" class="slogan">{{cardInfo.slogan}}</p>
    <div class="imgListWrap">
        <block v-for="(item,index) in cardInfo.list" :key="index">
            <div class="imgBox" :style="{width:(100/cardInfo.list.length)+'%'}">
                <u-image :src="item[thumbName]" alt="" class="goodsThumb" border-radius="8" mode="widthFix" />
                    <p v-if="type=='rush'" class="price">¥{{item.price}}</p>
                    <p v-if="type=='rush'" class="rushPrice">¥{{item.shop_price}}</p>
                    <div class="liveCover" v-if="type=='live'">
                        <image src="/static/images/icon-livePlay.png" class="play" />
                    </div>
                    <p v-if="type=='assemble'" class="assemble">
                        ¥{{item.price}}
                    </p>
                    <p v-if="type=='new_goods'" class="newGoods">
                        ¥{{item.shop_price}}
                    </p>
            </div>
        </block>
    </div>
</div>
</template>

<script>
export default {
    name: 'shopWindow',
    data() {
        return {

        }
    },
    props: {
        cardInfo: {
            type: Object,
            required: true,
            default: ()=>{}
        },
        type: {
            type: String,
            required: true,
            default: ''
        },
        thumbName: {
            type: String,
            default: 'thumb_url'
        }
    },
    methods: {
        linkTo() {
            let list = [{
                type: 'rush',
                path: '/pagesC/homeSon/Limitedtimespike?id=6'
            }, {
                type: 'live',
                path: '/pages/tabBar/Live'
            }, {
                type: 'assemble',
                path: '/pagesC/homeSon/fightGroupList?id=6'
            }, {
                type: 'new_goods',
                path: '/pagesC/homeSon/tagGoodsList?tag=new&id=4'
            }]
            list.forEach(res => {
                if (res.type == this.type) {
                    if (res.type === 'live') {
                        uni.$emit('openLive',{})
                        return uni.switchTab({
                            url: `${res.path}`
                        })
                    }
                    this.getnav(res.path)

                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.windowCard {
    border-radius: 12upx;
    flex-basis: 300upx;
  /*  #ifdef  MP-WEIXIN  */
    flex-basis: 280upx;
  /*  #endif  */
    flex-grow: 2;
    padding: 12upx;
    margin-top: 18upx;
    line-height: 1.32;

    background-color: #fff;

    &:first-child {
        background-image: linear-gradient(0deg, #ffd0d0, #fff);

        .slogan {
            color: #fe4444;
        }
    }

    &:nth-child(2) {
        .slogan {
            color: #fe4444;
        }
    }

    &:nth-child(3) {
        .slogan {
            color: #ff5d7b;
        }
    }

    &:nth-child(4) {
        background-image: linear-gradient(0deg, #ffdbc4, #Fff);
    }

    &:nth-child(even) {
        margin-left: 12upx;
    }

    .slogan {
        margin: 0;
        color: #ffa468;
        font-size: 24upx;
    }

    .windowHeader {
        display: flex;
        align-items: center;

        .title {
            font-size: 36upx;
            color: #444;
            margin-right: 8upx;
        }
    }

    .badge {
        background-color: #ff4444;
        color: #fff;
        font-size: 10px;
        display: flex;
        align-items: center;
        height: 32upx;
        border-radius: 6upx;
        padding: 2upx 8upx;
        border-top-right-radius: 14upx;
        border-bottom-left-radius: 14upx;
    }

    .liveBroad {
        @extend .badge;

    }

    .imgListWrap {
        margin-top: 14upx;
        display: flex;
        justify-content: space-between;

        .imgBox {
            text-align: center;
            height: 164upx;
            padding-bottom: 8upx;
            overflow: hidden;
            position: relative;
            border-radius:8upx;
            .newGoods {
                position: absolute;
                bottom: -6upx;
                left: 50%;
                transform: translateX(-50%);
                color: #fff;
                font-size: 24upx;
                background-image: linear-gradient(to right, #ffa468, #fa3f3f);
                padding: 4upx 6upx;
                opacity: 0.7;
                border-radius: 40upx;
            }

            .assemble {
                font-size: 10px;
                color: #fff;
                background-image: linear-gradient(to right, #ffa468, #ff5d7b);
                border-radius: 2upx;
                border-top-right-radius: 8upx;
                border-bottom-left-radius: 8upx;
            }

            .liveCover {
                position: absolute;

                left: 0;
                bottom: 0;
                right: 0;
                top: 0;
                border-radius: 8upx;
                animation: showCover 8s ease-in-out 1s infinite;

                .play {
                    animation: flip 12s ease-in-out 1s infinite;
                    width: 40upx;
                    height: 40upx;
                    margin-top: 60upx;
                }
            }

            &:not(:last-child) {
                margin-right: 8upx;
            }

            .goodsThumb {
                width: 100%;
                height: 160upx;
                overflow: hidden;
                border-radius: 8upx;
            }

            .price {
                color: #fe4444;
                font-weight: 500;
                font-size: 28upx;
                margin-top: -6upx;
            }

            .rushPrice {
                color: #999;
                text-decoration: line-through;
                font-size: 20upx;
            }
        }
    }
}

@keyframes showCover {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }

    50% {
        background-color: rgba(0, 0, 0, 0.3);
    }

    100% {
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes flip {
    0% {
        transform: rotateY(0) scale(0.9);
    }

    50% {
        transform: rotateY(360deg) scale(1.1);
    }

    100% {
        transform: rotateY(0) scale(0.9);
    }
}
</style>
